<template>
  <div class="order-detail">
    <div class="page-header">
      <el-button class="back-btn" type="text" @click="goBack">
        <el-icon>
          <ArrowLeft/>
        </el-icon>
        返回订单列表
      </el-button>
      <h1>订单详情</h1>
    </div>

    <el-card class="detail-card">
      <!-- 订单状态和编号 -->
      <div class="order-header">
        <div class="status-section">
          <el-tag :type="getStatusType(orderDetail.status)" effect="light" size="large">
            {{ getStatusText(orderDetail.status) }}
          </el-tag>
          <span class="order-sn">订单编号：{{ orderDetail.orderSn }}</span>
        </div>
      </div>

      <!-- 商品信息 -->
      <div class="section">
        <h3 class="section-title">商品信息</h3>
        <div class="product-info" @click="goToProductDetail">
          <el-image
              :preview-src-list="[orderDetail.productImage]"
              :src="orderDetail.productImage || '默认图片地址'"
              style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px;"
          ></el-image>
          <div class="product-details">
            <p class="product-name">{{ orderDetail.productName }}</p>
            <p class="product-price text-red-500">¥{{ orderDetail.totalAmount || 0 }}</p>
          </div>
          <div class="product-link">
            <el-icon>
              <Link/>
            </el-icon>
            <span>查看商品详情</span>
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="section">
        <h3 class="section-title">收货地址</h3>
        <div
            :class="{ 'can-edit': canEditAddress }"
            class="address-info"
            @click="handleAddressClick"
        >
          <div v-if="orderDetail.consignee && orderDetail.fullAddress" class="address-content">
            <p><span class="label">收货人：</span>{{ orderDetail.consignee }}</p>
            <p><span class="label">联系电话：</span>{{ orderDetail.phone || '未填写' }}</p>
            <p><span class="label">收货地址：</span>{{ orderDetail.fullAddress }}</p>
            <div v-if="canEditAddress" class="address-edit-hint">
              <el-icon>
                <Edit/>
              </el-icon>
              <span>点击修改地址</span>
            </div>
          </div>
          <div v-else class="no-address" @click="handleAddressClick">
            <el-icon>
              <Location/>
            </el-icon>
            <span>请选择收货地址</span>
            <el-button v-if="canEditAddress" size="small" text type="primary">选择地址</el-button>
          </div>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="section">
        <h3 class="section-title">订单信息</h3>
        <div class="order-info-grid">
          <div class="info-column">
            <h4>支付信息</h4>
            <p><span class="label">支付状态：</span>{{ getPayStatusText(orderDetail.status) }}</p>
            <p><span class="label">支付方式：</span>{{ getPayTypeText(orderDetail.payType) }}</p>
            <p><span class="label">支付时间：</span>{{ orderDetail.payAt || '暂无' }}</p>
          </div>
          <div class="info-column">
            <h4>时间信息</h4>
            <p><span class="label">创建时间：</span>{{ orderDetail.createdAt }}</p>
            <p><span class="label">发货时间：</span>{{ orderDetail.shippedAt || '暂无' }}</p>
            <p><span class="label">完成时间：</span>{{ orderDetail.receivedAt || '暂无' }}</p>
          </div>
        </div>
      </div>

      <!-- 物流信息（已发货状态显示） -->
      <div v-if="orderDetail.status === 3" class="section">
        <h3 class="section-title">物流信息</h3>
        <div class="logistics-info">
          <p><span class="label">物流公司：</span>{{ orderDetail.logisticsCompany }}</p>
          <p><span class="label">物流单号：</span>{{ orderDetail.logisticsNo }}</p>
        </div>
      </div>

      <!-- 订单操作 -->
      <div class="section operation-section">
        <h3 class="section-title">订单操作</h3>
        <div class="operation-buttons">
          <!-- 买家操作 -->
          <div v-if="isBuyer">
            <!-- 待支付状态 -->
            <el-button
                v-if="orderDetail.status === 1"
                size="large"
                type="primary"
                @click="openPaymentModal"
                :disabled="!hasAddress"
            >
              立即支付
            </el-button>
            <el-button
                v-if="orderDetail.status === 1"
                size="large"
                type="danger"
                @click="cancelOrder"
            >
              取消订单
            </el-button>
            <!-- 已发货状态 -->
            <el-button
                v-if="orderDetail.status === 3"
                size="large"
                type="success"
                @click="confirmReceipt"
            >
              确认收货
            </el-button>
          </div>

          <!-- 卖家操作 -->
          <div v-else>
            <!-- 已支付状态 -->
            <el-button
                v-if="orderDetail.status === 2"
                size="large"
                type="success"
                @click="openShipModal"
            >
              发货
            </el-button>
            <el-button
                v-if="orderDetail.status === 2"
                size="large"
                type="danger"
                @click="cancelOrder"
            >
              取消订单
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 支付模态框 -->
    <el-dialog v-model="paymentModalVisible" :width="500" title="订单支付">
      <div class="payment-details">
        <div class="mb-4">
          <p class="font-bold">订单信息</p>
          <p>订单编号: {{ orderDetail.orderSn }}</p>
          <p>商品名称: {{ orderDetail.productName }}</p>
        </div>
        <div class="mb-4">
          <p class="font-bold">收货信息</p>
          <p>收货人: {{ orderDetail.consignee }}</p>
          <p>收货地址: {{ orderDetail.fullAddress }}</p>
          <p>联系电话: {{ orderDetail.phone || '未填写' }}</p>
        </div>
        <div class="mb-4">
          <p class="font-bold text-red-500 text-xl">支付金额: ¥{{ orderDetail.totalAmount || 0 }}</p>
        </div>
        <div class="mb-4">
          <p class="font-bold">支付方式</p>
          <el-radio-group v-model="paymentMethod" class="mt-2">
            <el-radio label="alipay">支付宝</el-radio>
            <el-radio label="wechat">微信支付</el-radio>
            <el-radio label="card">银行卡支付</el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <el-button @click="paymentModalVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPayment">确认支付</el-button>
      </template>
    </el-dialog>

    <!-- 发货模态框 -->
    <el-dialog v-model="shipModalVisible" :width="500" title="订单发货">
      <div class="ship-details">
        <div class="mb-4">
          <p class="font-bold">订单信息</p>
          <p>订单编号: {{ orderDetail.orderSn }}</p>
          <p>商品名称: {{ orderDetail.productName }}</p>
          <p>收货人: {{ orderDetail.consignee }}（{{ orderDetail.phone || '未填写' }}）</p>
          <p>收货地址: {{ orderDetail.fullAddress }}</p>
        </div>
        <div class="mb-4">
          <p class="font-bold">物流信息</p>
          <el-form :model="shipForm" class="mt-2" label-width="100px">
            <el-form-item label="物流公司" prop="logisticsCompany" required>
              <el-input v-model="shipForm.shippingCompany" placeholder="请输入物流公司（如：顺丰）"></el-input>
            </el-form-item>
            <el-form-item label="物流单号" prop="logisticsNo" required>
              <el-input v-model="shipForm.trackingNumber" placeholder="请输入物流单号"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <el-button @click="shipModalVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmShip">确认发货</el-button>
      </template>
    </el-dialog>

    <!-- 地址选择模态框 -->
    <el-dialog v-model="addressModalVisible" :width="700" title="选择收货地址">
      <div class="address-selector">
        <!-- 地址列表 -->
        <div v-if="addressList.length > 0" class="address-list">
          <div
              v-for="address in addressList"
              :key="address.id"
              :class="{ 'address-item-active': selectedAddressId === address.id }"
              class="address-item"
              @click="selectAddress(address)"
          >
            <div class="address-item-content">
              <div class="address-header">
                <span class="consignee">{{ address.consignee }}</span>
                <span class="phone">{{ address.phone }}</span>
                <el-tag v-if="address.isDefault" size="small" type="primary">默认</el-tag>
              </div>
              <div class="address-detail">
                {{ getFullAddress(address) }}
              </div>
            </div>
            <div class="address-actions">
              <el-button size="small" text type="primary" @click.stop="editAddress(address)">
                编辑
              </el-button>
            </div>
          </div>
        </div>

        <!-- 无地址时的提示 -->
        <div v-else class="no-address-tip">
          <el-empty description="暂无收货地址">
            <el-button type="primary" @click="goToAddressManagement">
              去地址管理新增地址
            </el-button>
          </el-empty>
        </div>
      </div>

      <template #footer>
        <el-button @click="addressModalVisible = false">取消</el-button>
        <el-button :disabled="!selectedAddressId" type="primary" @click="confirmAddress">
          确认选择
        </el-button>
        <el-button plain type="primary" @click="goToAddressManagement">
          管理地址
        </el-button>
      </template>
    </el-dialog>

    <!-- 地址编辑模态框 -->
    <el-dialog v-model="addressEditModalVisible" :title="'编辑地址'" :width="600">
      <el-form ref="addressFormRef" :model="addressForm" :rules="addressRules" label-width="80px">
        <el-form-item label="联系人" prop="consignee">
          <el-input v-model="addressForm.consignee" placeholder="请输入收货人姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addressForm.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" required>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="province">
                <el-input v-model="addressForm.province" placeholder="省"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="city">
                <el-input v-model="addressForm.city" placeholder="市"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="district">
                <el-input v-model="addressForm.district" placeholder="区/县"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="详细地址" prop="detail">
          <el-input
              v-model="addressForm.detail"
              :rows="3"
              placeholder="请输入详细地址（街道、门牌号等）"
              type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault" :false-value="0" :true-value="1">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addressEditModalVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {ElMessage, ElMessageBox} from 'element-plus';
import {ArrowLeft, Edit, Link, Location} from '@element-plus/icons-vue';
import http from '@/request/Http.js';

const route = useRoute();
const router = useRouter();

// 订单详情数据
const orderDetail = ref({
  orderId: '',
  orderSn: '',
  productName: '',
  productImage: '',
  productId: '',
  totalAmount: 0,
  status: 1,
  payType: '',
  consignee: '',
  phone: '',
  fullAddress: '',
  createdAt: '',
  payAt: '',
  shippingCompany: '',
  trackingNumber: '',
  shippedAt: '',
  receivedAt: '',
  addressId: ''
});

// 模态框状态
const paymentModalVisible = ref(false);
const shipModalVisible = ref(false);
const addressModalVisible = ref(false);
const addressEditModalVisible = ref(false);
const paymentMethod = ref('alipay');
const shipForm = reactive({
  shippingCompany: '',
  trackingNumber: ''
});

// 地址相关数据
const addressList = ref([]);
const selectedAddressId = ref(null);
const addressFormRef = ref(null);
const addressForm = reactive({
  id: null,
  consignee: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  detail: '',
  isDefault: 0,
  userId: 1
});

// 地址验证规则
const addressRules = reactive({
  consignee: [
    {required: true, message: '请输入收货人姓名', trigger: 'blur'},
    {min: 2, max: 10, message: '姓名长度在2到10个字符', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  province: [
    {required: true, message: '请输入省份', trigger: 'blur'}
  ],
  city: [
    {required: true, message: '请输入城市', trigger: 'blur'}
  ],
  district: [
    {required: true, message: '请输入区/县', trigger: 'blur'}
  ],
  detail: [
    {required: true, message: '请输入详细地址', trigger: 'blur'},
    {min: 5, max: 100, message: '详细地址长度在5到100个字符', trigger: 'blur'}
  ]
});

// 计算属性
const isBuyer = computed(() => route.query.role === 'buyer');
const hasAddress = computed(() => !!(orderDetail.value.consignee && orderDetail.value.fullAddress));
// 新增：判断是否可以编辑地址
const canEditAddress = computed(() => {
  return isBuyer.value && orderDetail.value.status === 1; // 只有买家在待支付状态下才能修改地址
});

// 状态映射
const statusMap = {
  1: {text: '待支付', type: 'warning'},
  2: {text: '已支付', type: 'success'},
  3: {text: '已发货', type: 'primary'},
  4: {text: '已完成', type: 'success'},
  5: {text: '已取消', type: 'info'}
};

const payTypeMap = {
  'alipay': '支付宝',
  'wechat': '微信支付',
  'card': '银行卡支付'
};

// 工具函数
const getStatusText = (status) => statusMap[status]?.text || '未知状态';
const getStatusType = (status) => statusMap[status]?.type || 'info';
const getPayTypeText = (payType) => payTypeMap[payType] || '未支付';
const getPayStatusText = (status) => status === 1 ? '未支付' : '已支付';
const getFullAddress = (address) => {
  if (!address) return '';
  const {province, city, district, detail} = address;
  return `${province}${city}${district}${detail}`;
};

// 跳转到商品详情页
const goToProductDetail = () => {
  if (orderDetail.value.productId) {
    router.push(`/userHome/showGood/${orderDetail.value.productId}`);
  } else {
    ElMessage.warning('商品ID不存在，无法跳转');
  }
};

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const orderId = route.params.id;
    const response = await http.get(`/order/detail/${orderId}`);
    orderDetail.value = response.data || {};
    console.log(6666666666666666666666666666666666666666666)
    console.log(response)
  } catch (error) {
    console.error('获取订单详情失败:', error);
    ElMessage.error('获取订单详情失败');
  }
};

// 获取地址列表
const loadAddresses = async () => {
  try {
    const response = await http.get(`/address/user`);
    if (response && response.code === 200) {
      addressList.value = response.data || [];
    } else {
      ElMessage.error('获取地址列表失败');
    }
  } catch (error) {
    console.error('加载地址列表失败:', error);
    ElMessage.error('加载地址列表失败');
  }
};

// 地址点击处理
const handleAddressClick = () => {
  if (!canEditAddress.value) {
    ElMessage.warning('当前状态无法修改地址');
    return;
  }
  openAddressModal();
};

// 打开地址选择模态框
const openAddressModal = async () => {
  await loadAddresses();
  addressModalVisible.value = true;
  // 设置当前选中的地址
  if (orderDetail.value.addressId) {
    const currentAddress = addressList.value.find(addr =>
        addr.id === orderDetail.value.addressId);
    selectedAddressId.value = currentAddress?.id || null;
  }
};

// 选择地址
const selectAddress = (address) => {
  selectedAddressId.value = address.id;
};

// 确认选择地址
const confirmAddress = async () => {
  const selectedAddress = addressList.value.find(addr => addr.id === selectedAddressId.value);
  if (!selectedAddress) {
    ElMessage.warning('请选择地址');
    return;
  }
  console.log(selectedAddress)
  try {
    const response = await http.put('/order/updateAddress', {
      id: orderDetail.value.orderId,
      addressId: selectedAddress.id
    });

    if (response.code === 200) {
      ElMessage.success('地址更新成功');
      // 更新本地订单详情中的地址信息
      orderDetail.value.addressId = selectedAddress.id;
      orderDetail.value.consignee = selectedAddress.consignee;
      orderDetail.value.phone = selectedAddress.phone;
      orderDetail.value.fullAddress = getFullAddress(selectedAddress);
      addressModalVisible.value = false;
    } else {
      ElMessage.error(response.message || '地址更新失败');
    }
  } catch (error) {
    console.error('更新订单地址失败:', error);
    ElMessage.error('地址更新失败');
  }
};

// 编辑地址
const editAddress = (address) => {
  // 编辑模式
  addressForm.id = address.id;
  addressForm.consignee = address.consignee || '';
  addressForm.phone = address.phone || '';
  addressForm.province = address.province || '';
  addressForm.city = address.city || '';
  addressForm.district = address.district || '';
  addressForm.detail = address.detail || '';
  addressForm.isDefault = address.isDefault || 0;
  addressForm.userId = address.userId || 1;

  addressEditModalVisible.value = true; //打开编辑模态框
};

// 重置地址表单
const resetAddressForm = () => {
  addressForm.id = null;
  addressForm.consignee = '';
  addressForm.phone = '';
  addressForm.province = '';
  addressForm.city = '';
  addressForm.district = '';
  addressForm.detail = '';
  addressForm.isDefault = 0;
  addressForm.userId = 1;
};

// 保存编辑地址
const saveAddress = async () => {
  addressFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const submitData = {
          ...addressForm
        };
        // 更新地址
        const response = await http.put('/address', submitData);
        if (response && response.code === 200) {
          ElMessage.success('地址更新成功');
          await loadAddresses();
        } else {
          ElMessage.error(response.message || '更新地址失败');
        }
        addressEditModalVisible.value = false;
        resetAddressForm();
      } catch (error) {
        console.error('保存地址失败:', error);
        ElMessage.error('保存地址失败');
      }
    }
  });
};

// 跳转到地址管理页面
const goToAddressManagement = () => {
  router.push({path: '/userHome/Layout', query: {page: 'address'}});
  addressModalVisible.value = false;
};

// 返回订单列表
const goBack = () => {
  router.push({path: '/userHome/Layout', query: {page: 'order'}});
};

// 打开支付模态框
const openPaymentModal = () => {
  if (!hasAddress.value) {
    ElMessage.warning('请先选择收货地址');
    openAddressModal();
    return;
  }
  paymentModalVisible.value = true;
};

// 确认支付
const confirmPayment = async () => {
  try {
    const response = await http.post('/order/pay', {
      orderId: orderDetail.value.orderId,
      payType: paymentMethod.value
    });

    if (response.code === 200) {
      ElMessage.success('正在拉起支付接口！');
      paymentModalVisible.value = false;
      setTimeout(() => {
        // 支付成功后跳转到支付成功页面
        router.push({
          path: '/PaySuccess',
          query: {
            orderId: orderDetail.value.orderId,
            orderSn: orderDetail.value.orderSn,
            amount: `¥${orderDetail.value.totalAmount}`,
            productName: orderDetail.value.productName,
            productImage: orderDetail.value.productImage,
            consignee: orderDetail.value.consignee,
            phone: orderDetail.value.phone,
            fullAddress: orderDetail.value.fullAddress
          }
        })
      }, 1000)
    } else {
      ElMessage.error(`支付失败：${response.message || '未知错误'}`);
    }
  } catch (error) {
    console.error('支付接口调用失败:', error);
    ElMessage.error('支付请求异常，请重试');
  }
};

// 取消订单
const cancelOrder = () => {
  ElMessageBox.confirm(
      '确定要取消该订单吗？取消后无法恢复',
      '警告',
      {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}
  ).then(async () => {
    try {
      const orderData = {
        id: orderDetail.value.orderId,
        productId: orderDetail.value.productId
      }
      const response = await http.post(`/order/cancel`, orderData);
      if (response.code === 200) {
        ElMessage.success('订单已取消');
        await fetchOrderDetail(); // 刷新订单详情
      } else {
        ElMessage.error(`取消失败：${response.message || '未知错误'}`);
      }
    } catch (error) {
      console.error('取消订单接口调用失败:', error);
      ElMessage.error('取消请求异常，请重试');
    }
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

// 确认收货
const confirmReceipt = () => {
  ElMessageBox.confirm(
      '确认收到商品了吗？',
      '确认收货',
      {confirmButtonText: '确认收货', cancelButtonText: '取消', type: 'info'}
  ).then(async () => {
    try {
      const response = await http.post(`/order/confirm/${orderDetail.value.orderId}`);
      if (response.code === 200) {
        ElMessage.success('收货成功！');
        await fetchOrderDetail(); // 刷新订单详情
      } else {
        ElMessage.error(`操作失败：${response.message || '未知错误'}`);
      }
    } catch (error) {
      console.error('确认收货接口调用失败:', error);
      ElMessage.error('操作异常，请重试');
    }
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

// 打开发货模态框
const openShipModal = () => {
  shipForm.shippingCompany = '';
  shipForm.trackingNumber = '';
  shipModalVisible.value = true;
};

// 确认发货
const confirmShip = async () => {
  if (!shipForm.shippingCompany) return ElMessage.warning('请输入物流公司');
  if (!shipForm.trackingNumber) return ElMessage.warning('请输入物流单号');

  try {
    const response = await http.post('/order/ship', {
      orderId: orderDetail.value.orderId,
      shippingCompany: shipForm.shippingCompany,
      trackingNumber: shipForm.trackingNumber
    });

    if (response.data.success) {
      ElMessage.success('发货成功！');
      shipModalVisible.value = false;
      await fetchOrderDetail();
    } else {
      ElMessage.error(`发货失败：${response.message || '未知错误'}`);
    }
  } catch (error) {
    console.error('发货接口调用失败:', error);
    ElMessage.error('发货请求异常，请重试');
  }
};

onMounted(() => {
  fetchOrderDetail();
});
</script>

<style scoped>
.order-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.detail-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.order-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.order-sn {
  font-size: 16px;
  color: #666;
}

.section {
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.product-info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.product-info:hover {
  background-color: #f5f7fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.product-price {
  font-size: 20px;
  font-weight: 600;
}

.product-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #409eff;
  font-size: 14px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* 地址区域样式 */
.address-info {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.address-info.can-edit {
  cursor: pointer;
}

.address-info.can-edit:hover {
  background-color: #f5f7fa;
}

.address-info:not(.can-edit) {
  cursor: default;
  opacity: 0.8;
}

.address-content {
  padding: 12px;
  position: relative;
}

.address-edit-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #409eff;
  font-size: 14px;
  margin-top: 8px;
}

.no-address {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  color: #909399;
  justify-content: center;
  transition: all 0.3s ease;
}

.no-address.can-edit:hover {
  border-color: #409eff;
  color: #409eff;
}

.address-info p,
.logistics-info p {
  margin-bottom: 8px;
  line-height: 1.6;
}

.label {
  color: #666;
  min-width: 80px;
  display: inline-block;
}

.order-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.info-column h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.operation-section {
  background: #f8f9fa;
  border-radius: 8px;
  margin: 16px;
}

.operation-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.text-red-500 {
  color: #f56c6c;
}

.font-bold {
  font-weight: 600;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-2 {
  margin-top: 8px;
}

.text-xl {
  font-size: 20px;
}

/* 地址选择器样式 */
.address-list {
  max-height: 400px;
  overflow-y: auto;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #409eff;
}

.address-item-active {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.address-item-content {
  flex: 1;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.consignee {
  font-weight: 600;
  color: #333;
}

.phone {
  color: #666;
}

.address-detail {
  color: #666;
  line-height: 1.5;
}

.address-actions {
  margin-left: 12px;
}

.no-address-tip {
  text-align: center;
  padding: 40px 0;
}
</style>